{extend name="layouts/cms"}
{block name='body-content'}
<form class="layui-form form-opArticle layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">配置标题：</label>
        <div class="layui-input-inline">
            <input type="text" name="title" required lay-verify="required"
                   value="{$confData.title}"
                   placeholder="请输入标题" autocomplete="off" class="layui-input input-title-mz">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签字符：</label>
        <div class="layui-input-inline">
            <input type="text" name="tag" required lay-verify="required"
                   value="{$confData.tag}"
                   placeholder="请输入标签字符" autocomplete="off" class="layui-input input-title-mz">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所属类型：</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="sel_type" lay-verify="required">
                <option value="text" {$confData.type=="text"?"selected":""}>文本</option>
                <option value="checkbox" {$confData.type=="checkbox"?"selected":""}>开关</option>
                <option value="button" {$confData.type=="button"?"selected":""}>图片</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">配置取值：</label>
        <div class="div-config-type div-config-typeFor-text" style="display: {$confData.type=='text'?'block':'none'}" >
            <div class="layui-input-inline">
                <input type="text" name="value_text" required lay-verify="required"
                       value="{$confData.value}"
                       placeholder="请输入取值" autocomplete="off" class="layui-input input-title-mz">
            </div>
        </div>
        <div class="div-config-type div-config-typeFor-button" style="display: {$confData.type=='button'?'block':'none'}">
            <div class="layui-upload layui-input-inline">
                <button type="button" name="img_upload" class="layui-btn btn_upload_img">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <img class="layui-upload-img img-upload-preview-medium img-upload-view"
                     src="{$confData.type=='button'?$confData.value:'/'}">
            </div>
            <input type="hidden" name="value_button" class="menu-icon" value="{$confData.value}">
        </div>
        <div class="div-config-type div-config-typeFor-checkbox" style="display: {$confData.type=='checkbox'?'block':'none'}">
            <div class="layui-input-block">
                <input type="checkbox" {$confData['value']==1?"checked":""} name="value_checkbox"
                       lay-skin="switch" lay-filter="switchTest" lay-text="打开|关闭">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">提示信息：</label>
        <div class="layui-input-inline">
            <input type="text" name="tip" required lay-verify="required"
                   value="{$confData.tip}"
                   placeholder="请输入提示信息" autocomplete="off" class="layui-input input-title-mz">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序：</label>
        <div class="layui-input-inline">
            <input type="number" name="list_order"
                   value="{$confData.list_order}" required lay-verify="required"
                   autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">(数字越大，排序越靠前)</div>
    </div>

    {:token()}
    <input type="hidden" name="id" value="{$confData.id}">
    <div class="layui-form-item">
        <div class="layui-input-block div-form-op">
            <button class="layui-btn" type="button" onclick="editConfig('{$confData.id}')">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">放弃</button>
        </div>
    </div>
</form>

{/block}

{block name='single-content'}
<script src="__CMS__/js/moZhang.js"></script>
<script>
    //修改按钮的点击事件
    function editConfig(id) {
        var toUrl = "{:url('cms/config/edit',['id'=>'AID'])}";
        toUrl = toUrl.replace('AID', id);
        var postData = $(".form-opArticle").serialize();
        ToPostPopupsDeal(toUrl, postData);
    }

    layui.use(['upload','form'], function () {
        var upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.btn_upload_img'
            , type: 'images'
            , exts: 'jpg|png|gif' //设置一些后缀，用于演示前端验证和后端的验证
            //,auto:false //选择图片后是否直接上传
            //,accept:'images' //上传文件类型
            , url: '/api/upload/img_file'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('.img-upload-view').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                dialog.tip(res.message);
                //如果上传成功
                if (res.status == 1) {
                    $('.menu-icon').val(res.data.url);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                return layer.msg('上传失败,请重新上传');
            }
        });

        var form = layui.form;
        form.on('select(sel_type)', function(data){
            var sel_type = data.value;
            $(".div-config-type").hide();
            $(".div-config-typeFor-"+sel_type).show();
        });
    });


</script>
{/block}
